<template>
	<view class="work-record">
		<view class="line"><text></text></view>
		<view class="content">
			<view class="content_title">作业记录</view>
			<view class="tips">
				<image src="/static/images/tips.png" mode=""></image>
				提交前请确保图片质量清晰
			</view>
			<view class="imgBox"><image-drag-sort :max="9" @changeList="changeImg" :list="imgUrl" 
			:disabled="userOperation?false:true"
			></image-drag-sort></view>
			<!-- 备注 -->
			<view class="notice">
				<textarea
					type="textarea"
					v-model="checkDesc"
					placeholder="请输入备注内容"
					placeholder-class="textare"
					:disabled="disable"
					style="font-size: 28rpx;height: 200rpx;"
					maxlength="300"
				/>
			</view>
			<!-- <view>{{disable}}</view> -->
			<view class="length">{{ checkDesc.length + '/300' }}</view>
		</view>
		<!-- 	<view class="save" v-if="desMsg.userId === userinfo.user_id||!isEdit">
			<view @click="handleSave">提交</view>
			<button :disabled="disabledSubmit">提交</button>
			</view> -->
		<view class="save"><button :disabled="disable" hover-class="none" @click="handleSave">提交</button></view>
	</view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/index.vue';
import { mapState, mapActions } from 'vuex';
import { addRecord } from '@/apis/maintains.js';
export default {
	props: {
		checkHistoryId: {
			type: String
		},
		desMsg: {
			type: Object
		},
		isEdit: {
			type: Boolean
		},
		// 订单状态,2进行中,4已完成
		orderStatus: {
			type: Number
		},
		// 是否可以提交 (true可以点击,未签退) 
		userOperation:{
		  type:Boolean	
		}
	},
	components: {
		ImageDragSort
	},
	data() {
		return {
			imgUrl: [],
			checkDesc: ''
		};
	},
	watch: {
		desMsg(newVal,oldVal) {
			this.imgUrl = newVal.imgUrl;
			this.checkDesc = newVal.checkDesc;
		},
		checkHistoryId(newVal) {
			if (newVal) {
				this.imgUrl = this.desMsg.imgUrl;
				this.checkDesc = this.desMsg.checkDesc;
			}
		}
	},
	created() {
	},
	computed: {
		...mapState('user', ['userinfo']),

		// 输入框禁用
		disable() {
			// console.log(this.orderStatus, 'this.orderStatus的值');
			if (this.orderStatus === 4) {
				return true;
			}
			// 如果已经签退了 禁用
			else if (!this.userOperation) {
				return true;
			} else {
				// 如果是新增
				if (!this.isEdit) {
					return false;
				} else {
					// 如果是编辑
					if (this.desMsg.userId === this.userinfo.user_id) {
						return false;
					} else {
						return true;
					}
				}
			}
		}
		// 提交按钮禁用
		// disabledSubmit(){

		// 	if(this.orderStatus===4){
		// 		return true
		// 	}else{

		// 	}
		// }
	},
	methods: {
		changeImg(val) { 
			this.imgUrl = val;
		},
		handleSave() { 
			// return
			if (this.isEdit) {
				if (this.desMsg.userId !== this.userinfo.user_id) {
					return false;
				}
			} else {
				// 如果是新增
				if (!this.imgUrl.length && !this.checkDesc) {
					uni.showToast({
						title: '请添加图片或备注',
						icon: 'none'
					});
					return false;
				}
				// else {
				// 	const flag = this.list.length ? true : false;
				// 	const params = {
				// 		userId: this.userinfo.user_id,
				// 		checkHistoryId: this.checkHistoryId,
				// 		checkDesc: this.checkDesc,
				// 		imgUrl: this.imgUrl
				// 	};
				// 	// console.log(params);

				// 	addRecord(flag ? { ...params, id: this.list[0].id } : params).then(res => {
				// 		console.log(res);
				// 		uni.showToast({
				// 			title: '操作成功',
				// 			icon: 'none'
				// 		});
				// 	});
				// 	this.$emit('addRecord');
				// }
			}
			const params = {
				userId: this.userinfo.user_id,
				checkHistoryId: this.checkHistoryId,
				checkDesc: this.checkDesc,
				imgUrl: this.imgUrl
			};
			addRecord(this.isEdit ? { ...params, id: this.desMsg.id } : params).then(res => {
				if (res) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					this.$emit('addRecord');
				}
			});
		}
	}
};
</script>
<style>
textare {
	height: 200rpx;
}
.textare {
	/* color: red; */
}
</style>
<style lang="scss" scoped>
.work-record {
	background-color: #fff;
	padding: 20rpx 40rpx 32rpx 40rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	.line {
		margin-bottom: 18rpx;
		display: flex;
		justify-content: center;
		text {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}
	.content {
		.content_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
		.tips {
			display: flex;
			color: #ff7505;
			align-items: center;
			margin-bottom: 38rpx;
			margin-top: 4rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}
		}
		.imgBox {
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #e9e9e9;
		}
		.notice {
			padding-top: 32rpx;
			padding-bottom: 20rpx;
			height: 200rpx;
		}
		textarea {
			font-size: 28rpx;
		}
		.length {
			text-align: right;
			padding-bottom: 20rpx;
			color: #ccc;
		}
	}
	.save {
		display: flex;
		justify-content: center;
		button {
			display: flex;
			width: 670rpx;
			height: 70rpx;
			// background: #0091ff;
			border-radius: 8rpx;
			// color: #fff;
			justify-content: center;
			align-items: center;
		}
		// .disabled{
		// 	color: #fff;
		// 	background-color: #ccc!important;
		// 	pointer-events: none;

		// }
	}
}
</style>
